<template>
	<w-container class="page-bg">
		<w-navbar id="my-nav" title="盲盒结果"></w-navbar>
		<view class="content">
			<view class="item" v-for="(item,idx) in list" :key="idx">
				<w-image :src="item.listimg" width="59" height="59" radius="4"></w-image>
				<view class="info">
					<view class="font-size-13 font-color-textPrimary font-w-500 text-overflow">{{ item.name && handleLang(item.name) }}</view>
					<view class="font-size-12 font-color-999 mt-12">{{handleLang('藏品编号:')}} <text class="font-color-999 font-w-500">#{{ item.collection_code }}</text> </view>
				</view>
				<w-image :src="item.rarity_icon" width="59" height="55"></w-image>
			</view>
			<view class="hint">{{handleLang('商品陆续从链上转入个人中心，如有延迟请耐心等待')}}</view>
		</view>
		<view class="footer bg-color-item ptb-10">
			<view class="flex-center-sb plr-20">
				<w-button class="btnStyle" pain @click="$u.route({type:'navigateBack'})">{{handleLang('我的藏品')}}</w-button>
				<w-button class="btnStyle" @click="$u.route({type:'switchTab',url:'/pages/index/index'})">{{handleLang('继续购买')}}</w-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</w-container>
</template>

<script>
	export default {
		data() {
			return {
				list: uni.getStorageSync('blindBoxResultList')
			};
		}
	}
</script>

<style lang="scss">
	.btnStyle{
		width: 320rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 50rpx;
	}
	.content{
		width: 100%;
		padding: 32rpx 32rpx 228rpx;
		>.item{
			width: 100%;
			padding: 16rpx;
			// border: 1px solid #f52500;
			border-radius: 16rpx;
			background-color: $item-bg-color;
			@extend .flex-center,.mb-12;
			>.info{
				@extend .flex-1,.plr-8;
			}
		}
		>.hint{
			width: 100%;
			text-align: center;
			@extend .font-size-10,.font-color-minor;
		}
	}
	.footer{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
